<template>
	<div class="bg-white px-3" style="margin: -20px;margin-top: -1rem;margin-bottom: 0 !important;">
		
		<div class="py-2 border-bottom d-flex align-items-center">
			<el-button size="mini" type="success"
			@click="createTop">增加一级分类</el-button>
		</div>
		
		<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"
		default-expand-all
		draggable
		:expand-on-click-node="false"
		@node-drag-end="nodeDragEnd"
		@node-drop="nodeDrop">
			<span class="custom-tree-node" slot-scope="{ node, data }">
					<div>
						<el-input v-if="data.editStatus" v-model="data.name" size="mini"></el-input>
						<span v-else>{{ node.label }}</span>
					</div>
			        
			        <span>
						<el-button :type="data.status ? 'primary' : 'danger'" 
						size="mini"
						@click.stop="showOrHide(data)">
							{{data.status ? '显示' : '隐藏'}}
						</el-button>
						<el-button type="success" size="mini"
						@click="append(data)">增加</el-button>
						<el-button 
						:type="data.editStatus ? 'default' : 'warning'" size="mini"
						@click.stop="edit(data)">
							{{data.editStatus ? '完成' : '修改'}}
						</el-button>
						<el-button type="danger" size="mini"
						@click="remove(node, data)">删除</el-button>
			        </span>
			      </span>
		</el-tree>
	</div>
</template>

<script>
export default {
	inject: ['layout'],
	
	data() {
		return {
			data: [],
			defaultProps: {
				children: 'child',
				label: 'name'
			}
		};
	},
	
	created() {
		this.__init()
	},
	
	computed: {
		//排序后的数据
		sortData() {
			let data = []
			let sort = function(arr) {
				arr.forEach(item => {
					data.push(item)
					if(item.child.length) {
						sort(item.child)
					}
				})
			}
			//多维数组转一维数组
			sort(this.data)
			//排序
			data = data.map((item, index) => {
				return {
					id: item.id,
					order: index,
					category_id: item.category_id
				}
			})
			return data
		}
	},
	
	methods: {
		
		//初始化方法
		__init() {
			this.layout.showLoading()
			this.axios.get('/admin/category', {token: true})
				.then(res => {
					let data = res.data.data
					let addEditStatus = function(arr) {
						arr.forEach(item => {
							item.editStatus = false
							if (item.child.length) {
								addEditStatus(item.child)
							}
						})
					}
					addEditStatus(data)
					this.data = data
					this.layout.hideLoading()
				}).catch(err => {
					this.layout.hideLoading()
				})
		},
		handleNodeClick(data) {
			console.log(data);
		},
		showOrHide(data) {
			this.layout.showLoading()
			let status = data.status ? 0 : 1
			let msg = status ? '显示' : '隐藏'
			this.axios.post('/admin/category/' + data.id +'/update_status', {
				status: status
			}, {token: true}).then(res => {
				data.status = status
				this.layout.hideLoading()
				this.$message({
					type: 'success',
					message: msg + '成功'
				})
			}).catch(err => {
				this.layout.hideLoading()
			})
			
		},
		
		//修改
		edit(data) {
			if(!data.editStatus) {
				return data.editStatus = true
			}
			if(data.name === '') {
				return this.$message({
					type: 'error',
					message: '分类名称不能为空'
				})
			}
			this.layout.showLoading()
			this.axios.post('/admin/category/' + data.id, {
				status: data.status,
				name: data.name,
				category_id: data.category_id
			}, {token: true}).then(res => {
				data.editStatus = false
				this.layout.hideLoading()
				this.$message({
					type: 'success',
					message: '修改分类名称成功'
				})
			}).catch(err => {
				this.layout.hideLoading()
			})
			data.editStatus = !data.editStatus
		},
		
		//删除
		remove(node, data) {
			this.$confirm('此操作将删除该分类, 是否继续?', '提示', {
				confirmButtonText: '删除',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.layout.showLoading()
				this.axios.delete('/admin/category/' + data.id, {token: true})
					.then(res => {
						this.__init()
						this.layout.hideLoading()
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
					}).catch(err => {
						this.layout.hideLoading()
					})
				
			}).catch(() => {
				this.$message({
				type: 'info',
				message: '已取消删除'
				});
			});
		},
		
		//增加子分类
		append(data) {
			this.layout.showLoading()
			this.axios.post('/admin/category', {
				status: 0,
				name: '新分类',
				category_id: data.id
			}, {token: true}).then(res => {
				let obj = res.data.data
				obj.editStatus = true
				obj.child = []
				data.child.push(obj)
				this.layout.hideLoading()
			}).catch(err => {
				this.layout.hideLoading()
			})
		},
		
		//node拖拽
		nodeDrop(...options) {
			this.layout.showLoading()
			this.axios.post('/admin/category/sort', {
				sortdata: JSON.stringify(this.sortData)
			}, {token: true}).then(res => {
				this.__init()
				this.layout.hideLoading()
			}).catch(err => {
				this.hideLoading()
			})
		},
		//监听tree拖拽结束
		nodeDragEnd(...options) {
			//当前拖拽的对象
			let item = options[0].data
			//结束时最后进入的节点数据
			let obj = options[1].data
			if(obj) {
				if(options[2] === 'before' || options[2] === 'after') {
					item.category_id  = obj.category_id
				} else {
					item.category_id = obj.id
				}
			}
			
		},
		
		//增加一级分类
		createTop() {
			this.$prompt('请输入一级分类名称', '提示', {
					confirmButtonText: '创建',
					cancelButtonText: '取消',
					inputValidator: function(val) {
						if (!val || val.trim() === '' ) {
							return '分类名称不能为空'
						}
						return true
					}
				}).then(({ value }) => {
					this.layout.showLoading()
					//提交服务器
					this.axios.post('/admin/category', {
						status: 0,
						category_id: 0,
						name: value
					}, {token: true}).then(res => {
						this.__init()
						this.layout.hideLoading()
						this.$message({
							message: '增加一级分类成功',
							type: 'success'
						})
					}).catch(err => {
						this.layout.hideLoading()
					})
				}).catch(() => {
					this.$message({
					type: 'info',
					message: '取消输入'
				});       
			});
		}
	}
};
</script>

<style>
	.custom-tree-node {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 14px;
		padding-right: 8px;
	}
	.el-tree-node__content {
		padding: 20px 0;
	}
</style>
